<template>
    <popup  ref="popupRef" title="关联微信号列表"    :async="true"   width="60%">
        <div class="search-container mb-4">
            <el-input
                v-model="searchKeyword"
                placeholder="搜索微信号"
                prefix-icon="el-icon-search"
                clearable
                @input="handleSearch"
            >
                <template #prefix>
                    <el-icon><Search /></el-icon>
                </template>
            </el-input>
        </div>
        <el-card class="!border-none" shadow="never" style="max-height: 500px; overflow-y: auto;">
            <div class="mb-3 text-left total-count">
                共 <span class="font-bold text-primary">{{ filteredList.length }}</span> 条数据
            </div>
            <el-table :data="filteredList" height="450" header-align="center"  v-loading="loading">
                <el-table-column label="微信号" prop="user_id" align="center" />
            </el-table>
        </el-card>
    </popup>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import Popup from '@/components/popup/index.vue'
import { usePaging } from '@/hooks/usePaging'
import { apiTencentAdvertisingUserAdListBindWechatLists } from '@/api/tencent_advertising_user_ad_list'

const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('wechat_list')
const props = defineProps({
    ad_group_id: String
})
// 添加loading状态
const loading = ref(false)
// 存储所有数据
const allData = ref([])
// 搜索关键词
const searchKeyword = ref('')
// 过滤后的数据
const filteredList = computed(() => {
    if (!searchKeyword.value) {
        return allData.value
    }
    return allData.value.filter(item => 
        item.user_id && item.user_id.toLowerCase().includes(searchKeyword.value.toLowerCase())
    )
})

/**
 * 获取所有微信号列表数据
 */
 const getAllLists = async () => {
    loading.value = true
    try {
        const res = await apiTencentAdvertisingUserAdListBindWechatLists({
            ad_group_id: props.ad_group_id,
            page: 1,
            limit: 9999 // 设置一个较大的值，一次获取所有数据
        })
        allData.value = res || []
    } catch (error) {
        console.error('获取微信号列表失败:', error)
    }finally {
        loading.value = false
    }
}

/**
 * 处理搜索功能
 */
 const handleSearch = () => {
    // 搜索功能已通过计算属性实现，这里不需要额外处理
}

const open = (type = 'placement_log') => {
    mode.value = type
    popupRef.value?.open()
}

onMounted(() => {
    getAllLists()
    open()
})

defineExpose({
    open
})
</script>

<style scoped>
.search-container {
    padding: 0 10px;
}

.total-count {
    font-size: 16px;
    padding-left: 10px;
    color: #606266;
}

.total-count .text-primary {
    font-size: 18px;
    color: #409EFF;
}
</style>